<template>
  <div class="addGroup">
    <!-- 搜索 -->
    <div class="search">
      <el-input
        :placeholder="placeHolder[checkBtn]"
        v-model="number"
        @input="searchRoom"
      ></el-input>
      <el-button
        type="primary"
        plain
        ref="checkBtn"
        @click="checkSearch"
      >{{buttonMsg[checkBtn]}}</el-button>

      <el-button
        type="primary"
        style='width:15%; '
        @click="searchRoom"
      >搜索</el-button>
    </div>
    <!-- 结果列表 -->
    <div class="resultList">
      <ul v-if="searchList.length!=0">
        <li
          v-for="(item,index) in searchList"
          :key="index"
        >
          <div class="left">
            <div class="pic">
              <img
                v-if="item.avatar"
                :src="item.avatar"
                alt=""
              >
              <img
                v-else
                src="../../../../../../assets/avatar1.svg"
                alt=""
              >
            </div>
            <div class="name">
              {{item.name}}
            </div>
          </div>
          <div class="right">
            <el-button
              type="primary"
              plain
              size="medium"
              round
              @click="joinRoom(item)"
            >添加</el-button>
          </div>
        </li>
      </ul>
      <!-- 无结果时的提示信息 -->
      <div
        class="noresult"
        v-else
      >
        暂无结果
      </div>
    </div>
  </div>
</template>
<script>
import { searchRoomAPI, joinRoomAPI, getMyJoinRoom } from "@/api/socket";
import { mapState } from "vuex";
export default {
  data() {
    return {
      searchList: [],
      placeHolder: ["请输入群号……", "请输入群名……"],
      buttonMsg: ["按群名", "按群号"],
      checkBtn: 1,
      number: "",
      my_user_id: this.$store.state.users.userInfo.id,
    };
  },

  methods: {
    async searchRoom() {
      if (this.number) {
        const res = await searchRoomAPI(this.number, this.checkBtn);
        if (res.status == 0) {
          this.searchList = res.data;
          console.log("测试一下搜索得到的房间信息，", res.data[0]);
          console.log("群号", res);
        }
      } else {
        this.searchList = [];
      }
    },
    checkSearch() {
      this.checkBtn = this.checkBtn == 0 ? 1 : 0;
    },
    async joinRoom(room) {
      console.log("点击加入群聊后的信息", room);
      const res2 = await joinRoomAPI({
        room_id: room.id,
        avatar: room.avatar,
        name: room.name,
        author_id: room.user_id,
      });
      if (res2.status == 0) {
        this.$message.success("加入成功");
        // 加载群时获取我已加入的群聊
        this.$store.dispatch("getMyJoinRoom", 0);
      }
      this.number = "";
      this.searchList = [];
    },
  },
  computed: {
    ...mapState({
      myJoinRoom: (state) => state.chat.myJoinRoom,
    }),
  },
};
</script>
 
<style scoped lang='less'>
.addGroup {
  .search {
    width: 100%;
    display: flex;
  }

  .resultList {
    ul {
      margin-top: 30px;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;

        .left {
          display: flex;
          font-size: 16px;

          .pic {
            width: 50px;
            height: 50px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .name {
            height: 50px;
            line-height: 50px;
            margin-left: 20px;
          }
        }
      }
    }
  }
  .noresult {
    padding: 20px 0;
    font-size: 16px;
    color: #999;
    text-align: center;
  }
}
</style>